import { useCallback, useMemo } from 'react'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'
import './index.css';
import Header from '../../common/Header'
import CitySelector from '../../common/CitySelector'
import DateSelector from '../../common/DateSelector'
import Joumey from './component/Joumey'
import HighSpeed from './component/HighSpeed'
import DepartDate from './component/DepartDate'
import Submit from './component/Submit'
import { h0 } from '../../utils/fp'
import {
    exchangeFromTo,
    showCitySelector,
    hideCitySelector,
    fetchCityData,
    setSelectedCity,
    showDateSelector,
    hideDateSelector,
    setDepartDate,
    toggleHighSpeed,
} from './store/actionCreators';

function Index(props) {
    const {
        from,
        to,
        isCitySelectorVisible,
        isDateSelectorVisible,
        cityData,
        isLoadingCityData,
        highSpeed,
        dispatch,
        departDate,
    } = props;
    const onBack = useCallback(() => {
        window.history.back();
    }, []);
    const cbs = useMemo(() => {
        return bindActionCreators(
            {
                exchangeFromTo,
                showCitySelector,
            },
            dispatch
        );
    }, []);
    const citySelectorCbs = useMemo(() => {
        return bindActionCreators(
            {
                onBack: hideCitySelector,
                fetchCityData,
                onSelect: setSelectedCity,
            },
            dispatch
        );
    }, []);
    const departDateCbs = useMemo(() => {
        return bindActionCreators(
            {
                onClick: showDateSelector,
            },
            dispatch
        );
    }, []);

    const dateSelectorCbs = useMemo(() => {
        return bindActionCreators(
            {
                onBack: hideDateSelector,
            },
            dispatch
        );
    }, []);

    const highSpeedCbs = useMemo(() => {
        return bindActionCreators(
            {
                toggle: toggleHighSpeed,
            },
            dispatch
        );
    }, []);

    const onSelectDate = useCallback(day => {
        if (!day) {
            return;
        }

        if (day < h0()) {
            return;
        }

        dispatch(setDepartDate(day));
        dispatch(hideDateSelector());
    }, []);
    return (
        <div>
            <div className="header-wrapper">
                <Header title="火车票" onBack={onBack} />
            </div>
            <form action='/query' className="form">
                <Joumey
                    from={from}
                    to={to}
                    {...cbs}
                />
                <DepartDate time={departDate} {...departDateCbs} />
                <HighSpeed highSpeed={highSpeed} {...highSpeedCbs} />
                <Submit />
            </form>

            <CitySelector
                show={isCitySelectorVisible}
                cityData={cityData}
                isLoading={isLoadingCityData}
                {...citySelectorCbs}
            />

            <DateSelector
                show={isDateSelectorVisible}
                {...dateSelectorCbs}
                onSelect={onSelectDate}
            />
        </div>
    )
}

const mapStateToProps = (state) => {
    return {
        from: state.getIn(['index', 'from']),
        to: state.getIn(['index', 'to']),
        isCitySelectorVisible: state.getIn(['index', 'isCitySelectorVisible']),
        isDateSelectorVisible: state.getIn(['index', 'isDateSelectorVisible']),
        cityData: state.getIn(['index', 'cityData']),
        isLoadingCityData: state.getIn(['index', 'isLoadingCityData']),
        highSpeed: state.getIn(['index', 'highSpeed']),
        departDate: state.getIn(['index', 'departDate']),
    }
}
const mapDispatchToProps = (dispatch) => {

    return { dispatch };
}
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Index);